<template>

	</view>

	<view class="content">
		<view class="search">
			<view class="sea-icon">
				<text class="iconfont icon-sousuo" @click="gosearch"></text>
			</view>
			<swiper autoplay indicator-dots circular>
				<block v-for="(item,index) in swiperimg" :key="item.photoId">
					<swiper-item>
						<view class="sc">
							<image :src="item.photoUrl" mode="" />
						</view>
					</swiper-item>
				</block>
			</swiper>

		</view>


		<view class="h-icon">
			<view class="icon-text">
				<text class="iconfont icon-feiji800"></text>
				<text>省心</text>
			</view>
			<view class="icon-text">
				<text class="iconfont icon-z"></text>
				<text>品质</text>
			</view>
			<view class="icon-text">
				<text class="iconfont icon-sousuo1"></text>
				<text>私密</text>
			</view>
			<view class="icon-text">
				<text class="iconfont icon-vip"></text>
				<text>专享</text>
			</view>
		</view>

		<!-- 推荐 -->

		<view class="c-list">
			<text>推荐</text>
			<text class="iconfont icon-duigou"></text>
		</view>
		<view class="c-item">
			<view class="nav" v-for="(item,index) in list" :key="index" @click="goItem(item.productId)">
				<image :src="item.proPicUrl" alt=""></image>
				<text class="iconfont icon-heart xin"> {{item.collectionNum}}</text>
				<view class="father">
					<text class="title">{{item.proTitle}}</text>
					<view class="textlace"><text class="iconfont icon-ditu "></text> <text>{{item.country}}</text>
					</view>
					<view class="night">
						<text class="iconfont icon-shijian"> {{item.routingDat}}天{{item.routingNigth}}晚</text>
						<text class="iconfont icon-RectangleCopy">{{item.amount}}元起</text>
					</view>
				</view>
			</view>

			<!-- 招募活动 -->
			<view class="rec">
				<view class="r-title">
					<view class="text">
						<h1>招募活动</h1>
						<view class="span">旅途中，邂逅TA，邂逅世界的美</view>
					</view>
					<view class="text-r">
						<text>{{imagecount}}</text>/<text>10</text>
					</view>
				</view>
				<view class="r-swiper">
					<view class="r-swiper-wrapper">

						<swiper autoplay circular class="swiper-h" previous-margin='10rpx' next-margin='5rpx'
							@change='changetype'>
							<block v-for="(item,index) in swiperimagelist" :key="item.photoId">
								<swiper-item>
									<view class="rec-image">
										<image :src="item.pro_pic_url" mode=""></image>

										<view class="image-time">
											<text>{{item.out_time}}</text>
										</view>
									</view>

									<view class="rec-box">
										<text class="item-protitle">{{item.pro_title}}</text>
										<view class="place"><text class="iconfont icon-dingwei"></text>
											<text>{{item.country}}</text>
										</view>
									</view>
									<view class="rec-fix">
										<text
											class="iconfont icon-shijian">{{item.routing_data}}天{{item.routing_nigth}}晚</text>
										<text class="iconfont icon-jiaqian"> {{item.amount}}元</text>
									</view>
								</swiper-item>
							</block>
						</swiper>




					</view>
				</view>
			</view>

			<view class="sure">
				<view>
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>不用懂外语</text>
				</view>
				<view>
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>不用懂攻略</text>
				</view>
				<view>
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>没有购物坑</text>
				</view>
				<view>
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>不用折腾自己</text>
				</view>
			</view>
			<view class="favor">
				<view class="f-title">
					<text>猜你喜欢</text>
					<text class="iconfont icon-xialajiantouxiao"></text>
				</view>
				<view class="f-box">
					<view class="f-item" v-for="item in likelist" :key="item.productId">
						<view class="item-day">
							<image :src="item.proPicUrl" alt="" />
							<text class="iconfont icon-03"> {{item.collectionNum}}</text>
						</view>
						<view class="h2">{{item.proTitle}}</view>
						<view class="textlace">
							<text class="iconfont icon-dituzhaofang"></text>
							<text>{{item.country}}</text>
						</view>
						<view class="f-price">
							<text class="iconfont icon-shijian">{{item.routingDat}}天{{item.routingNigth}}晚</text>
							<text class="iconfont icon-RectangleCopy">{{item.amount}}元起</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>


<script>
	// import "./index.css"
	// import '@/static/font/iconfont.css'

	import http from "../../until/http.js";
	export default {
		data() {
			return {
				list: [],
				likelist: [],
				swiperimg: [],
				swiperimagelist: [],
				imagecount: 1
			}
		},
		onLoad() {
			http.request('/product/product/getProductRecommendUser', 'POST', {
				"pageNow": 1,
				"pageSize": 20,
				"orderBy": "top",
				"desc": false,
				"seller_user_id": "4bc4027c645343f09a964b5c2e9f875b"
			}).then(res => {

				this.list = res.data;
			});
			http.request('/requirement/request/getMatchedProducts', 'POST',
				'{"desc":false,"orderBy":"outtime","product_type":2,"pageSize":100}').then(res => {

				this.swiperimagelist = res.data.matchedProducts
			});
			http.request('product/product/guessYouLike', 'GET', '').then(res => {

				this.likelist = res.data
			});
			http.request('/product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b', 'GET',
				'{"desc":false,"orderBy":"outtime","product_type":2,"pageSize":100}').then(res => {
				this.swiperimg = res.data
			});

		},
		methods: {
			 gosearch(){
		uni.switchTab({
			  url: '/pages/find/index',
			})
			  },

			goItem(ev) {
				console.log(ev);
				uni.navigateTo({
					url: '/pages/item/index?id=' + ev

				})
			},
			changetype(ev) {

				const data = ev.detail.current + 1
				this.imagecount = data
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

	}

	/* 头部开始 */
	.header {
		width: 100%;
		height: 285rpx;
		position: relative;
	}

	.search {
		width: 100%;
		height: 33rpx;
		position: absolute;
		z-index: 9;
	}

	.search .sea-icon {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		text-align: center;
		background-color: #ebedf0;
		line-height: 76rpx;
		position: fixed;
		top: 120rpx;
		left: 10rpx;
		z-index: 10;
	}

	.search .sea-icon text {
		font-size: 40rpx;
		color: #4d5b5e;
		position: absolute;
		top: 5rpx;
		left: 18rpx;
		z-index: 11;
	}

	.sc {
		width: 100%;
		height: 187rpx;
	}

	.sc image {
		width: 100%;
		height: 374rpx;
		position: relative;
	}

	/* title开始 */
	.h-icon {
		height: 110rpx;
		/* padding: 10rpx 0; */
		margin-top: 374rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
	}

	.h-icon .icon-text {
		width: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #ead1af;
	}

	.h-icon .icon-text text:first-child {
		font-size: 56rpx;
	}

	.h-icon .icon-text text:last-child {
		font-size: 24rpx;
	}

	/* 招募活动 */
	.rec {
		width: 100%;
		height: 780rpx;
		background-color: white;
		font-size: 24rpx;
		position: relative;
	}

	.r-title {
		width: calc(100% - 132rpx);
		margin: 0 66rpx;
		height: 100rpx;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.text h1 {
		font-size: 48rpx;
		font-weight: normal;
	}

	.text .span {
		color: #858585;
	}

	.text-r text:first-child {
		font-size: 48rpx;
	}



	.rec-img {
		width: 666rpx;
		height: 354rpx;
		/* padding-left:20rpx; */
		position: relative;
	}

	.rec-image image {
		width: 666rpx;
		height: 354rpx;
		display: inline-block;
		margin-right: 20rpx;

	}

	.rec-box {
		width: 666rpx;
		padding: 20rpx 0;
		height: 36rpx;
		margin: auto;
		display: flex;
		align-items: center;

	}

	.item-protitle {
		width: 246rpx;
		height: 32rpx;
		overflow: hidden;
	}

	.swiper-h {
		height: 604rpx;
	}

	.rec-image .image-time {
		background: url(http://www.51houniao.com/wx/customer/classic/images/zhaomu.png?v=78f89dc);

		width: 288rpx;
		height: 120rpx;
		position: absolute;
		bottom: 200rpx;
		right: 20rpx;
		text-align: center;
		line-height: 120rpx;
		color: #33b3b4;
		transform: rotate(-15deg);
		z-index: 11;
	}

	.rec-box .place {
		background-color: #e9e9e9;
		font-size: 26rpx;
		padding-top: 6rpx;
		margin-left: 20rpx;
		height: 36rpx;
		padding-right: 14rpx;
		color: #484848;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.rec-fix {
		width: 666rpx;
		height: 38rpx;
		margin-bottom: 32rpx;
		color: #939393;
		margin: auto;
	}

	.rec-fix>text {
		font-size: 26rpx;
		color: gray;
		padding-right: 40rpx;
	}

	.rec::after {
		content: '';
		width: 666rpx;
		height: 2rpx;
		background-color: #b8b8b8;
		position: absolute;
		bottom: 0;
		left: 40rpx;
	}

	/* text */
	.sure {
		color: #333333;
		padding: 66rpx 0;
		height: 32rpx;
		display: flex;
		justify-content: space-around;
		font-size: 24rpx;
		background-color: white;
	}

	/* 猜你喜欢 */
	.favor {
		margin-top: 7px;
		background-color: white;
	}

	.f-title {
		height: 59px;
		border-bottom: 1px solid #dcdcdc;
		font-size: 16px;
		color: #858585;
		text-align: center;
		line-height: 59px;
		background-color: white;
	}

	.f-box {
		width: calc(100% - 20px);
		padding: 0 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 10px;
	}

	.f-item {
		width: 165px;
		height: 160px;
		border: 1px solid #f2f2f2;
		margin: 9px 0;
		font-size: 12px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		box-shadow: 4px 4px 0 2px #f2f2f2;
		background-color: white;
	}

	.f-item .h2 {
		font-size: 12px;
		font-weight: normal;
		align-self: flex-end;
		width: 100%;
	}

	.f-item>.item-day:first-child {
		position: relative;
	}

	.f-item>.item-day text {
		position: absolute;
		bottom: 8px;
		right: .16rem;
		font-size: 12px;
		color: white;
	}

	.f-item image {
		width: 145px;
		height: 77px;
	}

	.f-item .place {
		margin: 0 0 2px 4px;
	}

	.f-item .f-price {
		width: 160px;
		height: 16px;
		padding: 7px 0;
		margin-left: 5px;
		display: flex;
		justify-content: space-around;
	}

	.f-item .f-price text {
		font-size: 12px;
		color: #858585;
	}

	.textlace {
		text-align: center;
		margin-left: 40px;
	}


	.c-list {
		margin-top: 14rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #dbdbdb;
		background-color: white;
	}

	.c-list text:first-child {
		color: #858585;
		font-size: 32rpx;
		margin-right: 6rpx;
	}

	.c-list .iconfont {
		color: #aaaaaa;
		font-size: 58rpx;
	}

	.c-item {
		width: calc(100% - 10px);
		padding: 0 5px;
		background-color: white;
	}

	/* list列表 */
	.c-item {
		width: calc(100% - 20rpx);
		padding: 0 10rpx;
		background-color: white;
	}

	.nav {
		width: 100%;
		height: 156rpx;
		display: flex;
		flex-flow: row wrap;
		padding: 24rpx 0;
		border-bottom: 2rpx dashed gray;
		justify-content: space-between;
		position: relative;
	}

	.nav image {
		width: 294rpx;
		height: 156rpx;
	}

	.xin {
		font-size: 24rpx;
		color: white;
		position: absolute;
		top: 140rpx;
		left: 212rpx;
	}

	.father {
		width: 414rpx;
		height: 156rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		width: 412rpx;
		height: 28rpx;
		font-size: 28rpx;
	}

	.place {
		background-color: #e9e9e9;
		font-size: 26rpx;
		padding-top: 6rpx;
		height: 36rpx;
		padding-right: 14rpx;
		color: #484848;
		border-radius: 8rpx;
	}

	.night {
		width: 100%;
		height: 32rpx;
		display: flex;
	}

	.night>text {
		font-size: 24rpx;
		color: gray;
		padding: 0 16rpx;
	}

	.c-item>view:last-child {
		border-bottom: none;
		margin-bottom: 16rpx;
	}
</style>